<template>



	<view class="index-list">

		<view class="index-list1 u-f-ac  u-f-jsb">
			<!-- 左边 -->
			<view class="u-f-ac">
				<image :src="item.userpic" mode="widthFix" lazy-load></image>
				<text>{{item.username}}</text>
			</view>
			<!-- 右边 -->
			<!-- <view class="u-f-ac">
	
				<view class="icon iconfont icon-zengjia"></view>
				关注
			</view> -->

			<view class="u-f-ac" v-show='!item.isguanzhu' @tap='guanzhu'>
				<view class="icon iconfont icon-zengjia"></view>
				关注
			</view>


		</view>
		<view class="index-list2" @tap='opendetail'>

			{{item.title}}
		</view>
		<view class="index-list3  u-f-ajc" @tap='opendetail'>
			<image :src="item.titlepic" mode="widthFix" lazy-load></image>
		</view>
		<view class="index-list4  u-f-ajc u-f-jsb">


			<!--    左边的 -->
			<view class="u-f-ac">
				<!-- <view class="u-f-ac"> -->
				<view class="u-f-ac" :class="{'active':(item.infonum.index==1)}" @tap="caozuo('ding')">







					<view class="icon  iconfont  icon-icon_xiaolian-mian"></view>
					顶: {{item.infonum.dingnum}}
				</view>

				<!-- :class="{'active':(item.infonum.index==2)} -->
				<!-- <view class="u-f-ac"> -->

				<view class="u-f-ac" :class="{'active':(item.infonum.index==2)}" @tap="caozuo('cai')">


					<view class="icon iconfont icon-kulian"></view>
					踩:{{item.infonum.cainum}}
				</view>
			</view>
			<!--  右边 -->
			<view class="u-f-ac">

				<view class="u-f-ac">

					<view class="icon iconfont icon-pinglun1"></view>
					评论数量：{{item.sharenum}}
				</view>

				<view class="u-f-ac">
					<view class="icon iconfont icon-zhuanfa"></view>
					分享数量：{{item.commentnum}}
				</view>
			</view>


		</view>


	</view>
</template>

<script>
	export default {

		props: {
			item: Object,
			index1: Number

		},
		methods: {
			guanzhu() {
				// newList 是一个二维数组  现在更改的是里面数据引用  只会进行第一层比较
				this.item.isguanzhu = true
				uni.showToast({
					title: '关注成功'
				})


			},

			opendetail() {
				alert('跳转')
				// uni.navigateTo({
				// 	url:'../pages/news/news'
				// })
				// uni.switchTab({
				// 	url:'/pages/news/news'
				// })
			},

			//实现顶踩功能 
			caozuo(val) {
				switch (val) {
					case 'ding':
						//顶功能
						this.item.infonum.index = 1;
						this.item.infonum.dingnum++;
						this.item.infonum.cainum--;
						break;
						//踩功能
					case 'cai':
						this.item.infonum.index = 2;
						this.item.infonum.dingnum--;
						this.item.infonum.cainum++;
						break;

				}
			}
		}
	}
</script>

<style scoped>
	.index-list {
		padding: 20upx;
		border-bottom: 1upx solid #EEEEEE;
	}



	.index-list1>view:first-child {
		color: #999;
	}



	.index-list1>view:first-child image {
		width: 85upx;
		height: 85upx;
		border-radius: 100%;
		margin-right: 10upx;
	}



	.index-list1>view:last-child {

		background: #F4F4F4;
		border-radius: 5upx;
		padding: 0 10upx;
	}


	.index-list2 {

		padding-top: 15upx;
		font-size: 32upx;
	}

	.index-list3 {
		position: relative;
		padding-top: 15upx;

	}


	.index-list3>image {
		width: 100%;
		border-radius: 20upx;
	}



	.index-list4 {
		padding: 15upx 0;
	}


	.index-list4 view {
		color: #999;
	}


	.index-list4>view>view>view,
	.index-list4>view>view:first-child {
		margin-right: 10upx;
	}


	.index-list-play {
		position: absolute;
		font-size: 140upx;
		color: #FFF;
	}

	.index-list-playinfo {
		position: absolute;
		background: rgba(51, 51, 51, 0.72);
		color: #FFF;
		bottom: 8upx;
		right: 8upx;
		border-radius: 40upx;
		font-size: 22upx;
		padding: 0 12upx;
	}


	.index-list4 .active,
	.index-list4 .active>view {
		color: #C5F61C;
	}
</style>
